{% extends 'dashboard/base.html' %}

{% block title %}订单详情 #{{ order.order_number }} - 巧巧点餐管理后台{% endblock %}

{% block content %}
<div class="d-sm-flex align-items-center justify-content-between mb-4">
    <h1 class="h3 mb-0 text-gray-800">订单详情 #{{ order.order_number }}</h1>
    <div>
        <a href="{% url 'dashboard:order_print' order_id=order.id %}" target="_blank" class="btn btn-sm btn-secondary shadow-sm mr-2">
            <i class="fas fa-print fa-sm text-white-50"></i> 打印订单
        </a>
        <a href="{% url 'dashboard:order_list' %}" class="btn btn-sm btn-light shadow-sm">
            <i class="fas fa-arrow-left fa-sm text-gray-700"></i> 返回列表
        </a>
    </div>
</div>

<div class="row">
    <!-- 订单状态卡片 -->
    <div class="col-xl-4 col-md-6 mb-4">
        {% if order.status == 1 %}
        <div class="card border-left-warning shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-warning text-uppercase mb-1">当前状态</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">待确认</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-hourglass-start fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
        {% elif order.status == 2 %}
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">当前状态</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">制作中(已付款)</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-credit-card fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
        {% elif order.status == 3 %}
        <div class="card border-left-primary shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-primary text-uppercase mb-1">当前状态</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">制作中(已发货)</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-shipping-fast fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
        {% elif order.status == 4 %}
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">当前状态</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">已完成(已收货)</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-clipboard-list fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
        {% elif order.status == 5 %}
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">当前状态</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">已完成(已评价)</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-check-circle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
        {% elif order.status == 6 %}
        <div class="card border-left-danger shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-danger text-uppercase mb-1">当前状态</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">已取消</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-times-circle fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>

    <!-- 订单金额卡片 -->
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-success shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-success text-uppercase mb-1">订单金额</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ order.total_price }} 亲亲币</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-coins fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 下单时间卡片 -->
    <div class="col-xl-4 col-md-6 mb-4">
        <div class="card border-left-info shadow h-100 py-2">
            <div class="card-body">
                <div class="row no-gutters align-items-center">
                    <div class="col mr-2">
                        <div class="text-xs font-weight-bold text-info text-uppercase mb-1">下单时间</div>
                        <div class="h5 mb-0 font-weight-bold text-gray-800">{{ order.created_at|date:"Y-m-d H:i:s" }}</div>
                    </div>
                    <div class="col-auto">
                        <i class="fas fa-calendar-alt fa-2x text-gray-300"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 状态更新区域 -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">订单状态更新</h6>
    </div>
    <div class="card-body">
        <form method="post" action="{% url 'dashboard:order_update_status' order_id=order.id %}" class="form-inline">
            {% csrf_token %}
            <input type="hidden" name="action" value="update_status">
            <div class="form-group">
                <label for="status">订单状态:</label>
                <select class="form-control" id="status" name="status">
                    <option value="1" {% if order.status == 1 %}selected{% endif %}>待确认</option>
                    <option value="2" {% if order.status == 2 %}selected{% endif %}>制作中</option>
                    <option value="3" {% if order.status == 3 %}selected{% endif %}>已完成</option>
                    <option value="4" {% if order.status == 4 %}selected{% endif %}>已取消</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-sync-alt fa-sm"></i> 更新状态
            </button>
            
            {% if order.status != 6 %}
            <button type="button" class="btn btn-danger ml-2" data-toggle="modal" data-target="#cancelOrderModal">
                <i class="fas fa-times fa-sm"></i> 取消订单
            </button>
            {% endif %}
        </form>
        
        <!-- 状态时间线 -->
        <div class="mt-4">
            <h6 class="font-weight-bold text-primary mb-3">订单时间线</h6>
            <div class="timeline">
                {% for status in status_timeline %}
                <div class="timeline-item">
                    <div class="timeline-marker bg-{{ status.color }}">
                        <i class="fas {{ status.icon }} text-white"></i>
                    </div>
                    <div class="timeline-content">
                        <h6 class="timeline-title">{{ status.status }}</h6>
                        <p class="timeline-date text-muted">{{ status.time|date:"Y-m-d H:i:s" }}</p>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div class="row">
    <!-- 订单信息 -->
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">订单信息</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <tr>
                            <th width="30%" class="bg-light">订单号</th>
                            <td>{{ order.order_number }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">下单时间</th>
                            <td>{{ order.created_at|date:"Y-m-d H:i:s" }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">付款时间</th>
                            <td>{{ order.paid_at|date:"Y-m-d H:i:s"|default:"尚未付款" }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">发货时间</th>
                            <td>{{ order.delivered_at|date:"Y-m-d H:i:s"|default:"尚未发货" }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">收货时间</th>
                            <td>{{ order.received_at|date:"Y-m-d H:i:s"|default:"尚未收货" }}</td>
                        </tr>
                        <tr>
                            <th class="bg-light">完成时间</th>
                            <td>{{ order.finished_at|date:"Y-m-d H:i:s"|default:"尚未完成" }}</td>
                        </tr>
                        {% if order.canceled_at %}
                        <tr>
                            <th class="bg-light">取消时间</th>
                            <td>{{ order.canceled_at|date:"Y-m-d H:i:s" }}</td>
                        </tr>
                        {% endif %}
                        <tr>
                            <th class="bg-light">支付方式</th>
                            <td>{{ order.payment_method|default:"未指定" }}</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 客户信息 -->
    <div class="col-lg-6">
        <div class="card shadow mb-4">
            <div class="card-header py-3">
                <h6 class="m-0 font-weight-bold text-primary">客户信息</h6>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-bordered" width="100%" cellspacing="0">
                        <tr>
                            <th width="30%" class="bg-light">用户名</th>
                            <td>{{ order.user.username }}</td>
                        </tr>
                        {% if order.table_number %}
                        <tr>
                            <th class="bg-light">桌号</th>
                            <td>{{ order.table_number }}</td>
                        </tr>
                        {% endif %}
                        {% if order.receiver %}
                        <tr>
                            <th class="bg-light">收货人</th>
                            <td>{{ order.receiver }}</td>
                        </tr>
                        {% endif %}
                        {% if order.receiver_phone %}
                        <tr>
                            <th class="bg-light">联系电话</th>
                            <td>{{ order.receiver_phone }}</td>
                        </tr>
                        {% endif %}
                        {% if order.address %}
                        <tr>
                            <th class="bg-light">收货地址</th>
                            <td>{{ order.address }}</td>
                        </tr>
                        {% endif %}
                    </table>
                </div>
            </div>
        </div>
        
        <!-- 订单备注 -->
        <div class="card shadow mb-4">
            <div class="card-header py-3 d-flex justify-content-between align-items-center">
                <h6 class="m-0 font-weight-bold text-primary">订单备注</h6>
                <button type="button" class="btn btn-sm btn-outline-primary" data-toggle="modal" data-target="#editRemarkModal">
                    <i class="fas fa-edit fa-sm"></i> 编辑备注
                </button>
            </div>
            <div class="card-body">
                {% if order.remark %}
                    <p>{{ order.remark|linebreaks }}</p>
                {% else %}
                    <p class="text-muted">暂无备注信息</p>
                {% endif %}
            </div>
        </div>
    </div>
</div>

<!-- 订单商品 -->
<div class="card shadow mb-4">
    <div class="card-header py-3">
        <h6 class="m-0 font-weight-bold text-primary">订单商品</h6>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table class="table table-bordered table-hover" width="100%" cellspacing="0">
                <thead>
                    <tr>
                        <th width="10%">图片</th>
                        <th width="40%">商品名称</th>
                        <th width="15%">单价</th>
                        <th width="15%">数量</th>
                        <th width="20%">小计</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in order_items %}
                    <tr>
                        <td>
                            {% if item.food.image %}
                            <img src="{{ item.food.image.url }}" alt="{{ item.food.name }}" style="max-width: 50px; max-height: 50px;">
                            {% else %}
                            无图片
                            {% endif %}
                        </td>
                        <td>{{ item.food.name }}</td>
                        <td>{{ item.food_price }} 亲亲币</td>
                        <td>{{ item.count }}</td>
                        <td>{{ item.total_price }} 亲亲币</td>
                    </tr>
                    {% empty %}
                    <tr>
                        <td colspan="5" class="text-center">暂无订单商品数据</td>
                    </tr>
                    {% endfor %}
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="4" class="text-right">总计:</th>
                        <th>{{ order.total_price }} 亲亲币</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>

<!-- 取消订单确认模态框 -->
<div class="modal fade" id="cancelOrderModal" tabindex="-1" role="dialog" aria-labelledby="cancelOrderModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="cancelOrderModalLabel">确认取消订单</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" action="{% url 'dashboard:order_update_status' order_id=order.id %}">
                {% csrf_token %}
                <input type="hidden" name="status" value="6">
                <div class="modal-body">
                    <p>您确定要取消订单 <strong>#{{ order.order_number }}</strong> 吗？</p>
                    <p class="text-danger"><i class="fas fa-exclamation-triangle mr-1"></i> 取消后无法恢复，请谨慎操作。</p>
                    <div class="form-group">
                        <label for="cancel_reason">取消原因：</label>
                        <textarea id="cancel_reason" name="note" class="form-control" rows="3" placeholder="请输入取消原因..."></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-danger">确认取消</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 编辑备注模态框 -->
<div class="modal fade" id="editRemarkModal" tabindex="-1" role="dialog" aria-labelledby="editRemarkModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="editRemarkModalLabel">编辑订单备注</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" action="{% url 'dashboard:order_detail' order_id=order.id %}">
                {% csrf_token %}
                <input type="hidden" name="action" value="update_remark">
                <div class="modal-body">
                    <div class="form-group">
                        <label for="remark">备注内容：</label>
                        <textarea id="remark" name="remark" class="form-control" rows="5" placeholder="请输入备注内容...">{{ order.remark|default:'' }}</textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">保存更改</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_css %}
<style>
    .timeline {
        position: relative;
        padding-left: 30px;
    }
    
    .timeline-item {
        position: relative;
        margin-bottom: 20px;
        display: flex;
    }
    
    .timeline-marker {
        position: absolute;
        left: -30px;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .timeline-marker i {
        font-size: 10px;
    }
    
    .timeline-content {
        padding-left: 10px;
        border-left: 1px solid #e3e6f0;
        padding-bottom: 10px;
    }
    
    .timeline-title {
        margin-bottom: 0;
    }
    
    .timeline-date {
        font-size: 12px;
        margin-bottom: 0;
    }
</style>
{% endblock %} 